<template>
  <div
    class="popup-div__mask"
    @click="clickMask"
    v-show="show"
    :class="{ 'popup-div__cancelmask': !mask }"
  >
    <transition name="pop">
      <div class="popup-div__main" v-show="show">
        <div class="popup-slot__content">
          <slot>这里是PopUp组件</slot>
        </div>
        <div class="popup-slot__button" @click="clickButton">
          <slot name="button">确认</slot>
        </div>
      </div>
    </transition>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api";
import Vue from "vue";
export default defineComponent({
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    mask: {
      type: Boolean as PropType<boolean>,
      default: true,
    },
  },
  setup(props, context) {
    const clickButton: Function = function () {
      context.emit("click-button");
    };
    const clickMask: Function = function () {
      context.emit("click-mask");
    };
    return {
      clickButton,
      clickMask,
    };
  },
});
</script>
<style lang="stylus" scoped>
$popup-zindex = 500;
$mask-bgc = rgba(7,17,27,0.6);
$mask-blurfilter = 5px;
$popup-content-bgc = #fff;
$popup-radius = 6px;
$popup-button-bgc = rgb(0, 160, 220);
$popup-button-color = #fff;

// 动画
@keyframes bounce {
  0% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.pop-enter-active {
  animation: bounce 0.3s;
}

.pop-leave-active {
  animation: bounce 0.3s reverse;
}

.popup-div__mask {
  z-index: $popup-zindex;
  background-color: $mask-bgc;
  position: fixed; // 绝对定位
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur($mask-blurfilter);
  text-align: center;

  &::after { // 利用伪元素实现内部行内居中---兼容性hack
    content: '';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
  }
}

.popup-div__main {
  vertical-align: middle;
  display: inline-block;
  overflow-y: auto;
  border-radius: $popup-radius;

  .popup-slot__content {
    padding: 30px 50px;
    background-color: $popup-content-bgc;
  }

  .popup-slot__button {
    background-color: $popup-button-bgc;
    color: $popup-button-color;
    padding: 10px 20px;
    position: relative; // 相对定位

    // 遮罩元素
    &::after {
      content: '';
      position: absolute; // 绝对定位
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0;
    }

    // 激活遮罩
    &:active::after {
      opacity: 0.2;
    }
  }
}

.popup-div__cancelmask {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
}
</style>
